<template>
  <view class="box">
    <view class="box-list">
      <view class="box-list-1" v-for="(item, index) in list" :key="index">
        <view class="left">
          <view class="content">
            <view class="text">{{ item.description }}</view>
          </view>
          <view class="time">{{ item.add_datetime }}</view>
        </view>
        <view class="right" style="flex: 1">
          <view class="num">{{ item.change_amount_txt }}</view>
        </view>
      </view>
      <view v-if="list.length <= 0" class="None">
        <image
          style="width: 100%"
          :src="`${picUrl}/InfoNull.png`"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      base_url: this.$base_url,
      activeIndex: 0,
      total: 0,
      curpage: 1,
      list: [],
      listAdd: [],
      listSub: [],
      height: 88,
      top: 20,
      hasmore: false,
    };
  },
  onLoad() {
    this.getintegral();
  },
  onShow() {
    uni.getSystemInfo({
      success: (res) => {
        this.top = res.statusBarHeight;
      },
    });
  },
  onReachBottom() {
    if (this.hasmore) {
      this.curpage++;
      this.getintegral(true);
    } else {
      uni.showToast({
        icon: "none",
        title: "已是最后一页！",
      });
    }
  },
  watch: {
    list(val) {
      if (!this.hasmore) {
        this.total = 0;
        val.forEach((item) => {
          this.total += item.pl_points * 1;
        });
      }
    },
  },
  methods: {
    toLeft() {
      uni.navigateBack({
        delta: 1,
        fail() {
          uni.switchTab({
            url: "/main/home/member",
          });
        },
      });
    },
    tabChange(index) {
      if (this.activeIndex == index) {
        return;
      }
      this.curpage = 1;
      this.activeIndex = index;
      this.list = [];
      this.listAdd = [];
      this.listSub = [];
      this.getintegral();
    },
    getintegral(state = false) {
      //积分明细
      let that = this;
      // https://uriwin.com/  &key=&start_date=&end_date=
      that.$util
        .request({
          url: "/mobile/index.php?act=member_index&op=quota_used_record",
          method: "get",
          data: {
            curpage: that.curpage,
          },
        })
        .then(function (res) {
          if (res.error_code == 0) {
            that.hasmore = res.datas.paged.hasmore;
            if (state) {
              //列表数据
              that.list = that.list.concat(res.datas.list);
            } else {
              that.list = res.datas.list;
            }
            // if(that.hasmore){
            //     that.curpage++;
            //     that.getintegral(state=true)
            // }else{
            //     // that.list.forEach(item=>{
            //     //     if(item.pl_points.indexOf('-')==0){
            //     //         that.listSub.push(item)
            //     //     }else{
            //     //         that.listAdd.push(item)
            //     //     }
            //     // })
            // }
          } else {
            uni.showToast({
              icon: "none",
              title: res.message,
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
}
.box {
  .wallet-bg {
    .tab {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 128rpx 30rpx;
      .tab-1 {
        font-size: 32rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #909090;
      }
      .active {
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #323232;
        position: relative;
        color: #e96a1d;
      }
      .active::after {
        position: absolute;
        content: "";
        left: 20%;
        bottom: -10rpx;
        width: 40rpx;
        height: 4rpx;
        background: #e96a1d;
        border-radius: 3rpx;
      }
    }
  }
  .box-list {
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    // height: 300rpx;
    overflow-y: auto;
    .box-list-1 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0;
      border-bottom: 2rpx solid #eeeeee;
      .left {
        display: flex;
        flex-grow: 1;
        width: 80%;
        flex-direction: column;

        .add {
          width: 66rpx;
          height: 66rpx;
          image {
            width: 66rpx;
            height: 66rpx;
          }
        }
        .content {
          .text {
            font-size: 28rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #323232;
          }
          .time {
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #909090;
          }
        }
      }
      .time {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #909090;
      }
      .right {
        .num {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #e24b15;
        }
        .num2 {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #373737;
        }
      }
    }
  }
}
.box-bg {
  width: 100%;
  height: 370rpx;
  background: linear-gradient(315deg, #ea8c1e 0%, #e84a1d 100%);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  position: relative;
  .integralback {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 370rpx;
  }
  .order-stutas-box {
    display: flex;
    align-items: center;
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    bottom: 124rpx;
    .order-icon {
      width: 80rpx;
      height: 80rpx;
      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
    .order-icon-1 {
      margin-left: 30rpx;
      .order-icon-2 {
        font-size: 40rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }
      .order-icon-3 {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
.tui-header-box {
  position: fixed;
  left: 30rpx;
  right: 0;
  top: 40rpx;
  z-index: 9995;
  display: flex;
  align-items: center;
  .tui-header-icon {
    image {
      width: 307rpx;
      height: 30rpx;
    }
  }
  .header-text {
    width: 100%;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    .header-name {
      font-size: 36rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      padding-right: 36rpx;
    }
  }
}
.wallet-card {
  padding: 20rpx;
  position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: 50rpx;

  .lable {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
  }
  .money {
    display: flex;
    justify-content: center;
    margin: 39rpx 0 20rpx;
    font-size: 60rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
    align-items: flex-end;
    letter-spacing: 3rpx;
    .integralicon {
      width: 50rpx;
      height: 50rpx;
    }
    span {
      font-size: 30rpx;
    }
  }
}
</style>